<template>
    <el-form label-position="left" :model="adminEdit" ref="adminEdit" label-width="80px" size="mini" style="padding:20px">
        <el-form-item label="登陆用户名">
            <el-input v-model="adminEdit.username" placeholder="请输入登陆用户名" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
            <el-input v-model="adminEdit.name" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item label="电话">
            <el-input v-model="adminEdit.phone" placeholder="请输入电话"></el-input>
        </el-form-item>
        <el-form-item label="头像">
            <el-upload class="avatar-uploader" action="" :show-file-list="false" :auto-upload="false" :on-change="changeImg">
                <img v-if="adminEdit.headimg" :src="adminEdit.headimg" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="签名">
            <el-input type="textarea" v-model="adminEdit.remarks" placeholder="请输入签名"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button @click.native="close">取消</el-button>
            <el-button type="primary" @click.native="submit" :loading="loading">确定</el-button>
        </el-form-item>
        </el-row>
    </el-form>
</template>
<script>
import C from '@/common/common.js'
import AdminEdit from '@/service/organization/adminEdit.js'
import * as qiniu from 'qiniu-js'

export default {
  name: 'admin_changepas',
  data () {
    return {
      dialogVisible: false,
      adminEdit: {
        username: '',
        name: '',
        phone: '',
        remarks: '',
        dialogImageUrl: '',
        id: '',
        headimg: ''
      },
      file: '',
      loading: false,
      initialConditions: {}
    }
  },
  mounted: function () {
    this.getmsg()
  },
  methods: {
    async getmsg () {
      let data = await AdminEdit.getAdmininfo({})
      if (data) {
        this.adminEdit.username = data.username
        this.adminEdit.name = data.name
        this.adminEdit.phone = data.phone
        this.adminEdit.remarks = data.remarks
        this.adminEdit.dialogImageUrl = data.headimg
        this.adminEdit.id = data.id
        this.adminEdit.headimg = data.headimg
      }
    },
    async submit () {
      if (!(/^[\u4e00-\u9fa5]{2,4}$/.test(this.adminEdit.name))) {
        C.error('用户名为2到4个汉字')
        return false
      } else if (!(/^1[345678]\d{9}$/.test(this.adminEdit.phone))) {
        C.error('手机号不正确')
        return false
      }
      let that = this
      // 如果图片有变动开始上传图片
      if (this.file.name) {
        this.loading = true
        // 开始获取上传的token
        let token = await AdminEdit.getToken({})
        let keyName = new Date().getFullYear() + '/' + (new Date().getMonth() + 1) + '/' + new Date().getDate() + '/' + this.file.name
        let observable = qiniu.upload(this.file.raw, keyName, token.uptoken)
        observable.subscribe({
          next (res) {
            console.log(res)
          },
          error (err) {
            if (err) {
              console.log(err)
            }
            this.loading = false
            that.$message.error('上传失败！')
          },
          complete (res) {
            console.log(res)
            // 上传成功后开始提交表格
            that.adminEdit.headimg = `http://pde4eshzp.bkt.clouddn.com/${res.key}`
            that.submitForm()
          }
        })
      } else {
        that.submitForm()
      }
    },
    async submitForm (res) {
      let data = await AdminEdit.getEdit(this.adminEdit, 'post')
      if (data) {
        if (data.errno === 0) {
          this.loading = false
          this.$message({
            message: data.data.info,
            type: 'success'
          })
          this.passwordInfo = { ...this.initialConditions }
        } else {
          this.loading = false
          this.$message.error(data.errmsg)
        }
      }
    },
    async changeImg (file, fileList) {
      console.log(file)
      const isJPG = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png' || file.raw.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片格式错误!')
        return
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return
      }
      this.file = file
      this.adminEdit.headimg = file.url
    },
    close () {
      C.closeBrowserWindow()
    }
  }
}
</script>
<style>
.form-group {
    display: block;
}

.form-control {
    background-color: #cecece;
}

.avatar-uploader .avatar-uploader-icon,
.avatar-uploader .avatar {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar-uploader .el-upload {
    border: 1px dashed #ccc;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
</style>